<template>
    <div class="rightDiv">
        <div class="leftContent">
            <div class="classItem" :class="currentIndex === 6 ? 'active' : ''" @click="changeLnglatFir(currentIndex = 6)">
                全部校区
            </div>
            <div class="classItem" :class="currentIndex === index ? 'active' : ''" v-for="(item, index) in floorList"
                @click="changeLnglat(item, index)">
                {{ item.name || '-' }}
            </div>
        </div>
        <div class="bottomBox">
            <TitleStyle name="教室状态" width="242" height="32"></TitleStyle>
            <echarts1 :dataset="bigScreenStore.classStatus"></echarts1>
        </div>
        <div class="bottomright">
            <TitleStyle name="设备总数" width="242" height="32"></TitleStyle>
            <div class="shebei">
                <div class="item" v-for="item in bigScreenStore.euqipmentCountList">
                    <div>{{ item.equipmentName || '-' }}</div>
                    <div>{{ item.freeNum + item.inUseNum || '-' }}</div>
                </div>
            </div>
        </div>
        <div class="bottomCenter">
            <TitleStyle name="设备状态" width="242" height="32"></TitleStyle>
            <echarts4></echarts4>
        </div>
        <div class="bottomLeft">
            <TitleStyle name="空调功耗" width="242" height="32"></TitleStyle>
            <div class="leftBox">
                <div class="gonglv">
                    <div class="currGonglv">
                        <div style="display: flex;align-items: center;">
                            <div style=" width: 2px; height: 8px; background-color: #24CDAF;margin-right: 10px;"></div>
                            <div>
                                当前总功率
                            </div>
                        </div>
                        <div style="color: #08F6EB; font-size: 22px;font-family: '54xianhei';margin-top: 18px;">
                            2000w
                        </div>
                    </div>
                    <div class="zongGonglv">
                        <div style="display: flex;align-items: center;">
                            <div style=" width: 2px; height: 8px; background-color: #24CDAF;margin-right: 10px;"></div>

                            <div>
                                累计功耗
                            </div>
                        </div>
                        <div style="color: #08F6EB; font-size: 22px;font-family: '54xianhei';margin-top: 18px;">
                            65412141000w
                        </div>
                    </div>
                </div>
                <div class="totalKongtiao">
                    <div>空调总数</div>
                    <div>{{ handleNums(nums) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import TitleStyle from '@/components/big-screen/TitleStyle.vue';
import echarts1 from "@/views/bigScreen/globalView/echartsComponents/echarts1.vue"
import echarts4 from '../echartsComponents/echarts4.vue'
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { ref, onMounted, watch } from 'vue'
import useBigScreenStore from '@/stores/useBigScreenStore';
const bigScreenStore = useBigScreenStore()
const floorId = ref()
const campusId = ref()
const floorList = ref([
    '全部校区', '阳光校区', '南湖校区', '其他校区'
])
// 设备总数
// const euqipmentList = ref([])

const getSchoolArea = () => {
    EsAjax.get(ApiUrls.getCampustree).then(res => {
        if (res.data.code === 200) {
            let { data } = res.data
            floorList.value = data
        }
    })
}
const currentIndex = ref(6)
const nums = ref(3824)
const handleNums = (nums) => {
    nums = nums + ''
    if (nums.length > 3) {
        return nums.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
    }
}
const transportFacts = ref({})
const changeLnglat = (item, index) => {
    currentIndex.value = index
    bigScreenStore.getFloorList(item.id)
    bigScreenStore.setLnglat(item.buildingCoordinates)
}
const changeLnglatFir = () => {
    currentIndex.value = 6
    bigScreenStore.getFloorList()
    bigScreenStore.setLnglat(floorList.value[0].buildingCoordinates)
}
watch(() => [bigScreenStore.floorId, bigScreenStore.campusId], ([nfl, nca], [ofl, oca]) => {
    if (nfl === ofl && nca != oca) {
        floorId.value = 0
        campusId.value = nca
    }
    if (nca === oca && nfl != ofl) {
        floorId.value = nfl
        campusId.value = 0
    }
    bigScreenStore.getEuqipment(floorId.value, campusId.value)
    // euqipmentList.value = bigScreenStore.euqipmentCountList
})
onMounted(() => {
    getSchoolArea()
    bigScreenStore.getFloorList()
    bigScreenStore.getEuqipment(floorId.value, campusId.value)
})
</script>

<style lang="scss" scoped>
::v-deep(.el-progress-bar__outer),
::v-deep(.el-progress-bar__inner) {
    border-radius: 2px;
}

.leftContent {
    width: 118px;
    position: absolute;
    top: 25%;
    left: -27%;

    .classItem {
        width: 190px;
        height: 65px;
        background: url("../../../../assets/img/bigScreen/floor-unselect.png") no-repeat;
        line-height: 65px;
        padding-left: 50px;
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        cursor: pointer;
    }

    .active {
        width: 190px;
        height: 65px;
        background: url("../../../../assets/img/bigScreen/floor-selected.png") no-repeat;
        line-height: 65px;
        padding-left: 50px;
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        cursor: pointer;
    }
}

.rightDiv {
    position: absolute;
    top: 0px;
    right: -87px;
    margin-top: 83px;
    width: 520px;
    height: 100%;
    /*background-image: url("../../../../assets/img/bigScreen/rightBg.png");*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 105;
}

.bottomBox {
    width: 400px;
    height: 206px;
    border-radius: 10px;
    margin-bottom: 17px;
    background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);
}

.bottomright {
    width: 400px;
    height: 246px;
    border-radius: 10px;
    margin-bottom: 17px;
    background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);

    .shebei {
        padding: 30px 20px 25px 22px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: start;
        overflow-y: scroll;
        height: 130px;

        .item {
            width: 106px;
            height: 95px;
            // padding: 6px 0 0 28px;
            background: url("../../../../assets/img/bigScreen/border.png") no-repeat;
            background-size: contain;
            text-align: center;

            >div:nth-of-type(1) {
                font-size: 14px;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                color: rgba(255, 255, 255, .5);
                margin-top: 10px;
            }

            >div:nth-of-type(2) {
                margin-top: 6px;
                font-size: 18px;
                font-family: "54xianhei";
                font-weight: 400;
                color: #1CDDB7;
            }


        }

        .item:nth-child(2n) {
            >div:nth-of-type(2) {
                margin-top: 6px;
                font-size: 18px;
                font-family: "54xianhei";
                font-weight: 400;
                color: #FF8800;
            }
        }
    }
}

.bottomCenter {
    width: 400px;
    height: 256px;
    border-radius: 10px;
    margin-bottom: 17px;
    background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);
}

.bottomLeft {
    width: 400px;
    height: 226px;
    border-radius: 10px;
    background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);

    .leftBox {
        display: flex;

        .gonglv {
            margin-top: 18px;
            padding-left: 21px;

            .zongGonglv {
                margin-top: 20px;
            }
        }

        .totalKongtiao {
            width: 210px;
            height: 240px;
            background: url("../../../../assets/img/bigScreen/temp_00000_iSpt.png") no-repeat;
            background-position: 70px 52px;
            background-size: 57% 53%;
            text-align: center;

            >div:nth-of-type(1) {
                margin-top: 20px;
                margin-left: 57px;
                font-size: 20px;
                color: rgba($color: #fff, $alpha: .5);
            }

            >div:nth-of-type(2) {
                margin-top: 20px;
                margin-left: 57px;
                font-size: 28px;
                color: rgba($color: #fff, $alpha: 1.0);
                font-family: "54xianhei";
                font-style: italic;
                background-image: -webkit-linear-gradient(top, #fff, #15ECFF);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}
</style>